<template>
    <div class="item_center" style="height: 100vh; width: 100vw">
        <n-card class="switch-card" v-if="SwitchMark" hoverable>
            <div
                style="display: flex; flex-direction: column"
                @click="printClick"
            >
                <n-icon size="250">
                    <AnimalRabbit20Regular />
                </n-icon>
                <h3
                    style="
                        text-align: center;
                        font-weight: bold;
                        font-size: 20px;
                    "
                >
                    学生入口
                </h3>
            </div>
            <n-icon class="rigth-button" size="40" @click="switchClick">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    viewBox="0 0 24 24"
                >
                    <g
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    >
                        <path d="M16 3l4 4l-4 4"></path>
                        <path d="M10 7h10"></path>
                        <path d="M8 13l-4 4l4 4"></path>
                        <path d="M4 17h9"></path>
                    </g>
                </svg>
            </n-icon>
        </n-card>
        <n-card class="switch-card" v-if="!SwitchMark" hoverable>
            <div
                style="display: flex; flex-direction: column"
                @click="printClick"
            >
                <n-icon size="250">
                    <Accessibility28Regular />
                </n-icon>
                <h3
                    style="
                        text-align: center;
                        font-weight: bold;
                        font-size: 20px;
                    "
                >
                    教师入口
                </h3>
            </div>
            <n-icon class="rigth-button" size="40" @click="switchClick">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    viewBox="0 0 24 24"
                >
                    <g
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    >
                        <path d="M16 3l4 4l-4 4"></path>
                        <path d="M10 7h10"></path>
                        <path d="M8 13l-4 4l4 4"></path>
                        <path d="M4 17h9"></path>
                    </g>
                </svg>
            </n-icon>
        </n-card>
    </div>
</template>

<script setup>
import AnimalRabbit20Regular from "@vicons/fluent/AnimalRabbit20Regular";
import Accessibility28Regular from "@vicons/fluent/Accessibility28Regular";
import { ref } from "@vue/reactivity";
import {
    NGrid,
    NGridItem,
    NCard,
    NLayout,
    NIcon,
    NText,
    NH3,
    NButton,
} from "naive-ui";
const SwitchMark = ref(true);

function switchClick(e) {
    SwitchMark.value = !SwitchMark.value;
}

function printClick(e) {
    console.log("HHHH");
}
</script>

<script>
export default {
    name: "Home",
    components: {},
};
</script>

<style>
.switch-card {
    width: min-content;
    height: min-content;
}
.switch-card:hover {
    width: min-content;
    height: min-content;
    color: #36ad6aff;
}
.rigth-button {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #000;
}

.rigth-button:hover {
    color: #36ad6aff;
}
</style>
